<!--
 * @Author: Wushiqi
 * @Descripttion: 效果
 * @Date: 2021-04-01 17:39:58
 * @LastEditor: Wushiqi
 * @LastEditTime: 2021-04-01 21:55:09
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>效果</title>
  <script src="./jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      // 显示按钮点击
      $('#show').click(function() {
        // $('.box1').show()
        // show和hide可以添加参数控制显示和隐藏的速度，取值有：'slow'、'fast'或数字(单位毫秒)
        // $('.box1').show('slow')
        // $('.box1').show('fast')
        // $('.box1').show(1000)
        // 添加回调函数，当show显示完成后执行回调函数
        $('.box1').show(function() {
          alert('显示了')
        })
      })
      // 隐藏按钮点击
      $('#hide').click(function() {
        $('.box1').hide()
      })
      // toggle切换show()和hide()方法
      $('#toggle').click(function() {
        $('.box1').toggle(1000)
      })
      // 淡入
      $('#fadeIn').click(function() {
        // $('.box2').fadeIn()
        // 与show一样，可以添加两个参数：时长、回调函数
        $('.box2').fadeIn(1000, function() {
          alert('淡入了')
        })
      })
      // 淡出
      $('#fadeOut').click(function() {
        $('.box2').fadeOut()
      })
      // 淡入/淡出
      $('#fadeToggle').click(function() {
        $('.box2').fadeToggle()
      })
      // 淡出到指定不透明度
      $('#fadeTo').click(function() {
        $('.box2').fadeTo(2000, 0.2) // 前两个参数必传：时长、不透明度；第三个参数回调函数可省略
      })
      // 下滑
      $('#slideDown').click(function() {
        $('.box3').slideDown()
      })
      // 上滑
      $('#slideUp').click(function() {
        $('.box3').slideUp()
      })
      // 上滑/下滑
      $('#slideToggle').click(function() {
        $('.box3').slideToggle(3000)
      })
      // 变化位置
      $('#position').click(function() {
        $('.box4').animate({
          marginLeft: '200px',
          marginTop: '50px'
        })
      })
      $('#size').click(function() {
        $('.box4').animate({
          width: '250px',
          height: '250px'
        })
      })
      $('#smaller').click(function() {
        $('.box4').animate({
          width: '-=20px',
          height: '-=20px'
        })
      })
      $('#mixin').click(function() {
        const box = $('.box4')
        box.animate({ opacity: '0.5', marginLeft: '+=20px' }), // 先执行
        box.animate({ opacity: '0.8', marginTop: '+=20px'}) // 等上面的执行完了才执行
      })
    })
  </script>
  <style>
    .box1,
    .box2,
    .box3,
    .box4 {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <p>显示/隐藏 show()/hide()</p>
  <button id="show">显示</button>
  <button id="hide">隐藏</button>
  <button id="toggle">显示/隐藏</button>
  <div class="box1"></div>
  <br />
  <p>淡入/淡出</p>
  <button id="fadeIn">淡入</button>
  <button id="fadeOut">淡出</button>
  <button id="fadeToggle">淡入/淡出</button>
  <button id="fadeTo">淡出到某个不透明度</button>
  <div class="box2"></div>
  <br />
  <p>滑动</p>
  <button id="slideDown">下滑</button>
  <button id="slideUp">上滑</button>
  <button id="slideToggle">上滑/下滑</button>
  <div class="box3"></div>
  <br />
  <p>animation自定义动画</p>
  <button id="position">位置变化</button>
  <button id="size">盒子大小变化</button>
  <button id="smaller">一直变小</button>
  <button id="mixin">多个效果</button>
  <div class="box4"></div>
  <button>停止动画</button>
</body>
</html>